import 'package:flutter/material.dart';

///
/// ElevatedButton API : https://api.flutter-io.cn/flutter/material/ElevatedButton-class.html
///
class DemoRow extends StatelessWidget {
  const DemoRow({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Row 布局',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('水平方向布局'),
        ),
        body: const MyRow02(),
      ),
    );
  }
}

///
/// Row 布局，示例一
///
class MyRow01 extends StatelessWidget {
  const MyRow01({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        // RaisedButton 被 ElevatedButton 取代
        ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            primary: Colors.redAccent,
          ),
          child: const Text('Red Button'),
        ),
        ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            primary: Colors.lightBlue,
          ),
          child: const Text('Blue Button'),
        ),
        ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
          ),
          child: const Text('Green Button'),
        ),
      ],
    );
  }
}

///
/// Row 布局，示例二
///
/// Expanded API : https://api.flutter-io.cn/flutter/widgets/Expanded-class.html
///
class MyRow02 extends StatelessWidget {
  const MyRow02({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        // RaisedButton 被 ElevatedButton 取代
        Expanded(
          child: ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              primary: Colors.redAccent,
            ),
            child: const Text('Red Button'),
          )
        ),
        Expanded(
          child: ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              primary: Colors.lightBlue,
            ),
            child: const Text('Blue Button'),
          ),
        ),
        Expanded(
          child: ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              primary: Colors.green,
            ),
            child: const Text('Green Button'),
          ),
        ),
      ],
    );
  }
}
